<template>
	<view class="content">

		<image class="headicon" @click="changeHeadPic" :src="'http://localhost:8080/foodapp/'+ userInfo.icon " mode="">
		</image>
		<view class="text">
			<view v-if="!falg">
				<button @click="tologin" type="primary" style="width: 200rpx;">去登录</button>
			</view>
			<view v-else>
				<text>{{userInfo.username}}</text>
			</view>
		</view>
		<view class="entry-wrapper">
			<view class="item">
				<text>个人信息</text>
				<image src="../../static/more.png" mode=""></image>
			</view>

			<view class="item">
				<text>订单列表</text>
				<image src="../../static/more.png" mode=""></image>
			</view>

			<view class="item">
				<text>修改密码</text>
				<image src="../../static/more.png" mode=""></image>
			</view>

			<view class="item">
				<text>意见反馈</text>
				<image src="../../static/more.png" mode=""></image>
			</view>
		</view>
		<button type="primary" @click="quit">退出</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				falg: false
			}
		},
		methods: {
			// 更新个人头像功能
			changeHeadPic() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						let filePath = chooseImageRes.tempFilePaths[0]
						uni.uploadFile({
							url: 'http://localhost:8080/foodapp/user/upload_headpic',
							formData: {
								id: this.userInfo.id
							},
							filePath: filePath,
							name: 'file',
							success: (uploadRes) => {
								let resData = JSON.parse(uploadRes.data)
								console.log(resData);
								uni.showToast({
									title: '上传成功'
								})
							}
						})
					}
				})
			},

			// 退出登录
			quit() {
				uni.clearStorage()
				this.userInfo = {}
				uni.navigateTo({
					url: '/pages/logo/logo'
				})
			},
			// 去登录
			tologin() {
				uni.navigateTo({
					url: '/pages/logo/logo'
				});
			}
		},
		onLoad() {
			// 读取数据：
			let userinfo = uni.getStorageSync('userinfo')
			this.userInfo = userinfo
			if (userinfo) {
				this.falg = true
			} else {
				this.falg = false
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.headicon {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		margin: 80rpx;
	}

	.entry-wrapper {
		width: 90%;
		margin-top: 50rpx;
		/* background-color: #888; */
	}

	.entry-wrapper .item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
		border-bottom: #C8C7CC solid 1rpx;
	}

	.entry-wrapper .item:first-child {
		border-top: #C8C7CC solid 1rpx;
	}

	.entry-wrapper .item image {
		width: 48rpx;
		height: 48rpx;
	}

	button {
		width: 95%;
		margin-top: 50rpx;
	}
</style>